<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String basePath = request.getContextPath();
    Object email = request.getSession().getAttribute("email");
%>

<html>
<head>
    <title>在线留言</title>
    <jsp:include page="../common/common-css.jsp"></jsp:include>
    <jsp:include page="../common/common-js.jsp"></jsp:include>
    <style>
        a {
            text-decoration: none
        }

        a:hover {
            text-decoration: none
        }

        a:visited {
            text-decoration: none
        }

        a:default {
            text-decoration: none
        }

        .aliasName {
            position: relative;
            border-radius: 5px;
            border: none;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 20px
        }

        .aliasName:before {
            position: absolute;
            content: "";
            width: 2rem;
            height: 2rem;
            border: none;
            left: -1rem;
            top: 1rem;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            background-color: #ffffff;
        }
    </style>
</head>
<body style="background-color: #f5f5f5">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 10px 0px;">
    <div class="col-xs-0 col-sm-0 col-md-0 col-lg-1"></div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-7" style="padding: 0px;margin: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="text-default-color" style="padding-top: 10px">
                <h4>再次感谢您对劉員外网站的支持！</h4>
                <small>
                    对于浏览网站时您所遇到的问题可以在此给我们留言，同时我们也欢迎您对本站提出意见或建议，我们将及时予以答复。
                </small>
                <p style="margin-top: 10px">
                    <a href="<%=basePath%>/advice/advice?type=1" style="text-decoration: none">
                        <i class="icon-edit"></i>&nbsp;写留言
                    </a>
                </p>
                <hr style="width: 100%;">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div id="advicesArea">
                <div id="loadingAdvice" class="text-center">
                    <i class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在加载数据......
                </div>
                <div style="margin: 100px;display: none;" id="loadingNoAdvice" class="text-center">
                    <h2 style="color: #cccccc">All note will be Here</h2>
                </div>
            </div>
            <div id="advices"></div>
            <div id="loadMore" class="text-center" style="margin: 40px;display: none">加载更多</div>
            <div style="display: none;margin: 40px;" id="loadOver" class="text-center"></div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3" style="padding: 0px 10px;margin: 0px;">
        <div style="padding: 10px" class="hidden-lg hidden-md">&nbsp;</div>
        <div style="background-color: #ffffff;padding: 10px 10px 100px;">
            <table style="width: 100%">
                <tr>
                    <td style="padding: 10px 10px 10px 0px;" colspan="2">阅读最多好文</td>
                </tr>
                <tr>
                    <td style="border-bottom: 1px solid limegreen;width: 50px"></td>
                    <td style="border-bottom: 1px solid #f5f5f5"></td>
                </tr>
                <tr>
                    <td colspan="2" style="padding: 10px 10px 10px 0px;">
                        <div class="story">
                            <p style="color: #cccccc;">The latest article 10 will be here</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px 10px 10px 0px;" colspan="2">商品</td>
                </tr>
                <tr>
                    <td style="border-bottom: 1px solid limegreen;"></td>
                    <td style="border-bottom: 1px solid #f5f5f5"></td>
                </tr>
                <tr>
                    <td colspan="2" style="padding: 10px 10px 10px 0px;">
                        <div id="goods" style="padding: 0px"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<jsp:include page="../../foot.jsp"></jsp:include>
<jsp:include page="../common/common-html.jsp"></jsp:include>
</body>


<script language="JavaScript">
    function noMoreData() {
        // - 没有更多数据
        $("#loadMore").hide();
        $("#loadOver").show();
    }
    function moreData() {
        // - 还有更多数据
        $("#loadOver").hide();
        $("#loadMore").show();
    }
    // - 日期解析
    function formatDate(strTime) {
        if (strTime == null || strTime == '') {
            return "";
        }
        var date = new Date(strTime);
        return date.getFullYear() + "-" + addZero(date.getMonth() + 1) + "-" + addZero(date.getDate()) + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
    }
    function addZero(val) {
        return val < 10 ? '0' + val : val;
    }
    function reply(index, uuid) {
        var email = '<%=email%>';
        if (!validateEmail(email)) {
            return;
        }
        var id = '#reply' + index;
        var content = $.trim($(id).val());
        if (content == '') {
            alerErr("输入留言内容");
            return;
        }
        var url = "<%=basePath%>/note/add";
        var param = {content: content, uuid: uuid};
        $.post(url, param, function (data, status) {
            if (data.code == 200) {
                var noteId = '#note' + index;
                $(id).val('');
                var temp = parseNote(data.data.email, data.data.logo, data.data.content, data.data.name, data.data.createTime, index);
                $(noteId).prepend(temp);
                var clazz = '.replyBox_' + index;
                $(clazz).hide();
                var ID = '#reply' + index;
                $(ID).val('');
            } else {
                aler(data);
            }
        })
    }
    function parseNote(email, logo, content, name, createTime, index) {
        if (logo != null && logo != '' && logo != undefined) {
            logo += "-120x120";
        }
        if (logo == undefined) {
            logo = '<%=basePath%>/img/user.png';
        }
        var url = "<%=basePath%>/user/queryinfo?email=" + email;
        var subItem = '';
        subItem += '<table style="width: 100%;">';
        subItem += '<tr><td>';
        subItem += '<table style="width: 100%;">';
        subItem += '<tr>';
        subItem += '<td rowspan="2" style="padding-top: 5px;width: 30px;height: 30px" align="left" valign="top">';
        subItem += '<a href="' + url + '"><img class="img-responsive img-circle" style="width: 30px;height: 30px" src="' + logo + '" /></a>';
        subItem += '</td>';
        subItem += '<td style="padding-top: 10px;padding-bottom: 5px;padding-left: 5px;color: #999999;"valign="middle"><small>' + name + '</small></td>';
        subItem += '</tr>';
        subItem += '<tr>';
        subItem += '<td style="padding: 5px">';
        subItem += '<p>' + content + '</p>';
        subItem += '<table>';
        subItem += '<tr>';
        subItem += '<td align="left" style="color: #999999;">';
        subItem += '<p><small>' + createTime + '</small></p>';
        subItem += '</td>';
        subItem += '<td style="padding-left: 10px">';
        subItem += '<p><a href="javascript:replayIcon(' + index + ',\'' + email + '\',\'' + name + '\',' + true + ')"><i class="icon-comments-alt"></i></a></p>';
        subItem += '</td>';
        subItem += '</tr>';
        subItem += '</table>';
        subItem += '</td>';
        subItem += '</tr>';
        subItem += '</table>';
        subItem += '</td></tr></table>';
        subItem += '<hr>';
        return subItem;
    }
    var pageNo = 1;
    function parseContent(url, logo, alias, createtime, content, index, uuid, notes) {
        // - 组装说说
        var item = '';
        item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="margin: 0px;padding: 0px;">';
        item += '<table style="width: 100%;">';
        item += '<tr>';
        item += '<td style="width: 45px;height: 45px;padding-top: 10px"valign="top">';
        item += '<a href="' + url + '">';
        item += '<img style="width: 40px;height: 40px" class="img-responsive img-circle" src="' + logo + '">';
        item += '</a>';
        item += '</td>';
        item += '<td style="padding: 0px 0px 0px 20px;color: darkgrey;">';
        item += '<p style="background-color: #ffffff;padding: 10px;"class="aliasName">'
        item += '<table style="width: 100%">';
        item += '<tr><td style="padding: 5px">' + alias + '</td></tr>';
        item += '<tr><td style="padding: 10px 5px">' + content + '</td></tr>';
        item += '<tr>';
        item += '<td>';
        item += '<table>';
        item += '<tr>';
        item += '<td align="left" style="padding: 5px;color: #999999;background-color: #ffffff"><small>' + formatDate(createtime) + '</small></td>';
        item += '<td align="right" style="padding: 5px;"><span style="padding-left: 10px"><a href="javascript:replayIcon(' + index + ',\'' + alias + '\',\'' + alias + '\',' + false + ')"><i class="icon-comments">&nbsp;回复</i></a><span></td>';
        item += '</tr>';
        item += '</table>';
        item += '<table style="width: 100%;padding:5px 20px;display:none;margin:10px 0px;"class="replyBox_' + index + '">';
        item += '<tr>';
        item += '<td style="padding: 5px">';
        item += '<table style="width: 100%">';
        item += '<tr>';
        item += '<td style="width: 100%">';
        item += '<input id="reply' + index + '" type="text"  maxlength="512" style="width: 100%;padding: 5px;border-left: 5px solid #ffffff;border: none;" placeholder="输入内容"/>';
        item += '</td>';
        item += "<td style='padding: 0px 5px'><a  style='padding: 4px' class='btn btn-default-color' href='javascript:reply(" + index + ",\"" + uuid + "\")'>&nbsp;回&nbsp;复&nbsp;</a></td>";
        item += '</tr>';
        item += '</table>';
        item += '</td>';
        item += '</tr>';
        item += '</table>';
        item += '<hr>';
        if (notes != undefined && notes.length > 0) {
            item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "style="padding: 10px;" id="note' + index + '">';
            for (var j = 0; j < notes.length; j++) {
                var note = notes[j];
                item += parseNote(note.email, note.logo, note.content, note.name, note.createTime, index);
            }
            item += '</div>';
        } else {
            item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding-top: 15px" id="note' + index + '"></div>';
        }
        item += '</p>';
        item += '</td>';
        item += '</tr>';
        item += '</table>';
        item == '</div>';
        return item;
    }
    function replayIcon(index, email, name, flag) {
        var clazz = '.replyBox_' + index;
        $(clazz).show();
        var ID = '#reply' + index;
        $(ID).focus();
        if (!flag) {
            $(ID).val('');
            return;
        }
        var alias = name;
        if (name == '' || name == null || name == undefined) {
            alias = email;
        }
        $(ID).val('@' + alias + ' ');
    }
    function loadAdvice(pageNo, pageSize, type, status) {
        var index_init = (pageNo - 1) * pageSize;
        var index = 0;
        var url = "<%=basePath%>/advice/list";
        var param = {pageNo: pageNo, pageSize: pageSize, type: type, status: status};
        $.post(url, param, function (data, status) {
            var advices = data;
            var item;
            var alias;
            var logo = '<%=basePath%>/img/user.png';
            if (advices.length == 0) {
                if (pageNo == 1) {
                    // - 没有数据
                    $("#loadingAdvice").hide();
                    $("#loadingNoAdvice").show();
                } else {
                    // - 没有更多数据
                    $("#loadMore").hide();
                    $("#loadOver").show();
                }
            } else {
                $("#advicesArea").hide();
                for (var i = 0; i < advices.length; i++) {
                    index = index_init + i;
                    logo = '<%=basePath%>/img/user.png';
                    var msgType = advices[i].msgType;
                    alias = advices[i].name;
                    var dealName = advices[i].dealName;
                    var dealTime = advices[i].dealTime;
                    var dealPhone = advices[i].dealPhone;
                    if (advices[i].name == 'Your Name') {
                        alias = advices[i].email;
                    }
                    if (advices[i].logo != null && advices[i].logo != '' && advices[i].logo != undefined) {
                        logo = advices[i].logo + "-120x120";
                    }
                    var url = "<%=basePath%>/user/queryinfo?email=" + advices[i].email;
                    item = "";
                    item += parseContent(url, logo, alias, advices[i].createtime, advices[i].content, index, advices[i].uuid, advices[i].notes);
                    $("#advices").append(item);
                }
                if (advices.length == pageSize) {
                    moreData();
                } else {
                    noMoreData();
                }
            }
        })
    }

    function loadStory(pageNo, pageSize) {
        var url = "<%=basePath%>/story/list";
        var param = {pageNo: pageNo, pageSize: pageSize, orderField: "read_count", storyType: 0};
        var item = '';
        var logo = '';
        $.post(url, param, function (data, status) {
            var stories = data;
            if (stories.length > 0) {
                $(".story").empty();
                for (var i = 0; i < stories.length; i++) {
                    logo = '';
                    if (stories[i].imgUrl == null || stories[i].imgUrl == '' || stories[i].imgUrl == undefined || stories[i].imgUrl == '<%=basePath%>/img/product.png') {
                        logo = '<%=basePath%>/img/product.png';
                    } else {
                        logo = stories[i].imgUrl + '-360x200';
                    }
                    item = '';
                    item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
                    item += '<a style="text-decoration: none;" href="<%=basePath%>/story/info?uuid=' + stories[i].uuid + '">';
                    item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="padding: 0px ;">';
                    item += '<img class="img-responsive" src="' + logo + '" alt="' + stories[i].name + '">';
                    item += '</div>';
                    item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
                    item += '<p style="font-weight: bold;">' + stories[i].title + '</p>';
                    item += '<p style="color: #999999;">' + stories[i].subTitle + '</p>';
                    item += '<table style="width: 100%">';
                    item += '<tr>';
                    item += '<td><p><span class="badge" style="background-color: #CC66CC">' + stories[i].tag + '</span></p></td>';
                    item += '<td align="right"><p style="color: #999999;" class="text-right"><small>阅读：' + stories[i].readCount + '</small></p></td>';
                    item += '</tr>';
                    item += '</table>';
                    item += '</div>';
                    item += '</a>';
                    item += '</div>';
                    item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px"><hr></div>';
                    $(".story").append(item);
                }
            }
        })
    }

    function buildGood(goodExt) {
        var type = goodExt.type;
        var typeDesc = goodExt.remark;
        var list = goodExt.list;
        var item = '';
        var temp = '';
        for (var i = 0; i < list.length; i++) {
            var goodUrl = '';
            var url = list[i].url;
            var id = list[i].id;
            var name = list[i].name;
            var deleted = list[i].deleted;
            var sales = list[i].sales;
            var price = list[i].price;
            var unit = list[i].unit;
            if (url == null || url == '' || url == undefined || url == '<%=basePath%>/img/product.png') {
                goodUrl = '<%=basePath%>/img/product.png';
            } else {
                goodUrl = url + '-360x200';
            }
            item += '<a style="text-decoration: none" href="javascript:toProduct(' + id + ');">';
            item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
            item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="margin: 5px 0px;padding: 0px ">';
            item += '<img class="img-responsive" src="' + goodUrl + '" alt="' + name + '">';
            item += '</div>';
            item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
            item += '<p style="padding: 5px 0px;font-weight: bold;color: #444444">' + name + '</p>';
            item += '<table style="width: 100%">';
            item += '<tr>';
            item += '<td style="color: red">';
            item += '￥' + price + '/' + unit;
            item += '</td>';
            item += '<td align="right">';
            if (deleted == 1) {
                item += '<p style="color: #999999">已下架</p>';
            }
            item += '<small style="color: #999999">销量：' + sales + '</small>';
            item += '</td>';
            item += '</tr>';
            item += '</table>';
            item += '</div>';
            item += '</div>';
            item += '</a>';
            item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
            item += '<hr style="margin: 5px">';
            item += '</div>';
            temp += item;
            item = '';
        }
        return temp;
    }

    // - 加载商品列表
    function loadGoods(pageNo, pageSize) {
        var url = "<%=basePath%>/product/list";
        var email = '<%=email%>'
        var param = {pageNo: pageNo, pageSize: pageSize, email: email};
        $.post(url, param, function (data, status) {
            var goods = data;
            $("#goodsArea").hide();
            if (goods.length > 0) {
                for (var i = 0; i < goods.length; i++) {
                    $("#goods").append(buildGood(goods[i]));
                }
                if (goods.length == pageSize) {
                    // - 还有更多数据
                    $("#loadOver").hide();
                    $("#loadMore").show();
                } else {
                    // - 没有更多数据
                    $("#loadMore").hide();
                    $("#loadOver").show();
                }
            } else {
                if (pageNo == 1) {
                    // - 没有数据
                    var noDataShow = '';
                    noDataShow += '<p style="color: #cccccc;">The latest goods 10 will be here</p>';
                    $("#goods").empty();
                    $("#goods").append(noDataShow);
                } else {
                    // - 没有更多数据
                    $("#loadMore").hide();
                    $("#loadOver").show();
                }
            }
        })
    }

    function toProduct(productId) {
        var url = '<%=basePath%>/order/preadd?productId=' + productId;
        window.location.href = url;
    }

    $(function () {
        initStyle();
        loadAdvice(pageNo++, 10, 1, null);
        loadStory(0, 10);
        loadGoods(0, 10);
        $("#loadMore").click(function () {
            loadAdvice(pageNo++, 10, 1, null);
        })
    })
</script>
</html>
